<template>
  <div class="major-list">
    <div class="scroll-list" v-if="dataList.length">
      <div
        class="major-item box-border"
        v-for="(_item, _index) in dataList"
        :key="_index"
      >
        <div class="major-title" @click="handleToDetail(_item)">
          {{ _item.name ? _item.name : '-' }}
        </div>
        <div class="major-attr">
          <div class="row">
            <span class="label">专业代码：</span>
            <span class="value">
              {{ _item.tagCode ? _item.tagCode : '-' }}
            </span>
          </div>
          <div class="row">
            <span class="label">修业年限：</span>
            <span class="value">
              {{ _item.tagTimeDesc ? _item.tagTimeDesc : '-' }}
            </span>
          </div>
          <div class="row">
            <span class="label">开设院校：</span>
            <span class="value">
              {{ _item.collegeNum ? _item.collegeNum + '所' : '-' }}
            </span>
          </div>
          <div class="row">
            <span class="label">平均薪酬：</span>
            <span class="value">
              {{ _item.aveSalary }}
            </span>
          </div>
          <div class="row span-2">
            <span class="label">授予学位：</span>
            <span class="value">
              {{ _item.tagDesc ? _item.tagDesc : '-' }}
            </span>
          </div>
          <div class="row span-3">
            <span class="label">相关院校：</span>
            <span class="value text-ellipsis">
              {{ _item.topCollege }}
            </span>
          </div>
        </div>
      </div>
      <div class="finished-text"></div>
    </div>
    <div class="empty-container" v-else>
      <Empty />
    </div>
  </div>
</template>
<script setup>
import { ref, defineProps, watch, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { positionsByIndustry } from '@/api/industryMap';
import Empty from '@/components/Empty.vue';

const router = useRouter();
const props = defineProps({
  industryName: {
    type: String,
    default: '',
  },
});

const loading = ref(false);
const finished = ref(false);
const dataList = ref([]);
const pageNum = ref(1);
const pageSize = ref(10);

const getDataList = async () => {
  loading.value = true;
  const params = {
    name: props.industryName,
  };
  const res = await positionsByIndustry(params);
  if (res.code === 200) {
    const data = res.data || [];
    dataList.value = data.map((item) => ({
      ...item,
      aveSalary: handleAveSalary(item.aveSalary),
      topCollege: handleTopCollege(item.topCollege),
    }));
  }
  loading.value = false;
};

const handleToDetail = (item) => {
  const routeObj = {
    name: 'MajorDetail',
    query: {
      positionTagId: item.positionTagId,
      tagName: item.name,
      cateType: item.cpType,
      showSearch: true,
    },
  };
  router.push(routeObj);
};

const handleAveSalary = (val) => {
  if (!val) {
    return '-';
  }
  if (+val <= 0) {
    return '-';
  }
  return val + '元/月';
};
const handleTopCollege = (val) => {
  if (!val || !val.length) {
    return '-';
  }
  return val.map((item) => item.name).join('、');
};

watch(
  () => props.industryName,
  (nawVal) => {
    getDataList();
  },
  { deep: true }
);
onMounted(() => {
  getDataList();
});
</script>

<style lang="scss" scoped>
.major-list {
  width: 100%;
  height: 100%;
  padding-top: 40px;
  box-sizing: border-box;
  .empty-container {
    height: 100%;
    padding-bottom: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
}
.scroll-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.major-item {
  position: relative;
  background: #ffffff;
  border-radius: 28px;

  .major-title {
    padding: 24px 32px;
    font-weight: bold;
    font-size: 28px;
    color: #2b4076;
    line-height: 28px;
    background: linear-gradient(
      90deg,
      rgba(235, 248, 255, 0.88) 0%,
      rgba(230, 241, 255, 0.3) 100%
    );
    border-radius: 28px 28px 0px 0px;
    // backdrop-filter: blur(24px);
    position: relative;
    &::after {
      content: '';
      position: absolute;
      top: 50%;
      right: 32px;
      transform: translateY(-50%);
      width: 40px;
      height: 40px;
      background: url('@/assets/images/industryMap/arrowRight.png') no-repeat;
      background-size: 100% 100%;
    }
  }
  .major-attr {
    padding: 20px 32px 28px;
    display: grid;
    grid-gap: 16px;
    grid-template-columns: 1.2fr 1fr 1fr;
    .row {
      font-weight: 400;
      font-size: 24px;
      line-height: 36px;
      display: flex;
      align-items: center;
      white-space: nowrap;
      &.span-3 {
        grid-column: span 3;
      }
      &.span-2 {
        grid-column: span 2;
      }
    }
    .label {
      color: #999999;
    }
    .value {
      color: #555555;
    }
  }
}
.finished-text {
  grid-column-start: span 2;
}
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
// 设置边框
.box-border::before {
  content: '';
  position: absolute;
  inset: 0px;
  border-radius: 42px;
  padding: 4px;
  mask-composite: exclude;
  pointer-events: none;
  -webkit-mask: linear-gradient(
    180deg,
    rgba(255, 255, 255, 1),
    rgba(214, 233, 255, 1)
  );
  mask: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(214, 233, 255, 1));
  -webkit-mask-composite: xor;
  z-index: -1;
}
</style>
